import React from 'react';
import {StyleSheet, Text, View, Pressable} from 'react-native';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
const Mine = ({navigation}) => {
  return (
    <View style={styles.container}>
      <View style={styles.title}>
        <Text style={styles.titleText}>個人資料</Text>
      </View>
      <View style={styles.personalContainer}>
        <View style={styles.personal}>
          <View style={styles.personalId}>
            <MaterialCommunityIcons
              name="account-circle"
              color="#000"
              size={40}
            />
            <Text style={styles.idText}>ID 1234567890</Text>
          </View>
          <View style={styles.moneyContainer}>
            <View style={styles.moneyContainerLeft}>
              <MaterialCommunityIcons
                name="currency-usd"
                color="#000"
                size={40}
              />
              <Text style={styles.moneyText}>888,888,888.00</Text>
            </View>
          </View>
        </View>
      </View>
      <View style={styles.LinkList}>
        <Pressable
          style={styles.LinkItem}
          onPress={() => navigation.navigate('PurseScreen')}>
          <Text style={styles.LinkItemText}>我的錢包</Text>
          <MaterialCommunityIcons
            name="chevron-right"
            color="#999999"
            size={30}
          />
        </Pressable>
        <Pressable
          style={styles.LinkItem}
          onPress={() => navigation.navigate('ChangePasswordScreen')}>
          <Text style={styles.LinkItemText}>更改密碼</Text>
          <MaterialCommunityIcons
            name="chevron-right"
            color="#999999"
            size={30}
          />
        </Pressable>
        <Pressable
          style={styles.LinkItem}
          onPress={() => navigation.navigate('SettingScreen')}>
          <Text style={styles.LinkItemText}>系統設定</Text>
          <MaterialCommunityIcons
            name="chevron-right"
            color="#999999"
            size={30}
          />
        </Pressable>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {},
  title: {
    height: 60,
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
  },
  titleText: {
    color: '#17141a',
    fontWeight: 'bold',
    fontSize: 20,
  },
  personalContainer: {
    paddingLeft: 10,
    paddingRight: 10,
  },
  personal: {
    backgroundColor: 'white',
    borderColor: '#a8a8a8',
    borderWidth: 1,
    borderRadius: 10,
    padding: 15,
    paddingTop: 10,
    paddingBottom: 10,
  },
  personalId: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'flex-start',
    flexDirection: 'row',
    height: 50,
  },
  idText: {
    color: '#666',
    fontSize: 26,
    fontWeight: 'bold',
    marginLeft: 5,
  },
  moneyContainer: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'space-between',
    flexDirection: 'row',
    height: 50,
  },
  moneyContainerLeft: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'flex-start',
    flexDirection: 'row',
  },
  moneyText: {
    color: '#666',
    fontSize: 26,
    fontWeight: 'bold',
    marginLeft: 5,
  },
  moneyContainerRight: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'flex-start',
    flexDirection: 'row',
  },
  changeText: {
    color: '#009900',
    fontSize: 14,
  },
  LinkItem: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'space-between',
    flexDirection: 'row',
    paddingLeft: 10,
    paddingRight: 10,
    borderBottomColor: '#e1e1e1',
    borderBottomWidth: 1,
    height: 44,
    marginTop: 10,
  },
  LinkItemText: {
    color: '#333333',
    fontSize: 14,
    fontWeight: 'bold',
  },
});

export default Mine;
